<template>
  <div v-if="$route.meta.title == null" style="margin: 10px;">
    <slot name="body"></slot>
  </div>
  <div v-else>
    <div class="container-fluid">
      <div class="breadcrumb" v-show="$route.meta.title">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="crumb in this.$route.meta.title" :key="crumb">{{crumb}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-card class="main-body" :body-style="{padding: '10px'}" :class="{'mt-10' : $route.meta}" shadow="hover">
        <slot name="body"></slot>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Main"
};
</script>


<style lang="stylus" scoped>
@import '~assets/css/style.styl';

.container-fluid {
  .breadcrumb {
    background: #FFF;
    border-radius: 0;
    box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.1);
    padding 1.2rem 1rem
  }

  .main-body {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>

